<template>
<div>
    <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
    />
    <van-list>
        <van-cell v-for="cinema in computedDataList" :key="cinema.cinemaId">
                <div>{{cinema.name}}</div>
                <div class="address">{{cinema.address}}</div>
        </van-cell>
    </van-list> 
</div>

    
</template>

<script>
import Vue from 'vue';
import { Search,List,Cell } from 'vant';
Vue.use(Search).use(List).use(Cell);

import {mapState, mapActions} from "vuex"

export default {
    data() {
        return {
            value: '',
        };
    },
    mounted () {
        if(this.cinemaList.length === 0){
            this.getCinemaData(this.cityId)
        }
    },
    methods: {
        ...mapActions("cinemaModule",["getCinemaData"]),
        onCancel(){
            this.$router.back()
        }
    },
    computed: {
        ...mapState("cinemaModule",["cinemaList"]),
        ...mapState("cityModule",["cityId"]),
        computedDataList(){
            if(this.value === "") return []
            return this.cinemaList.filter(item => {
                // return item
                // item.address || item.name
                const reg = new RegExp(this.value);
                return item.address.search(reg) != -1 ||  item.name .search(reg) != -1;
            })
        }
    }
}
</script>